<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- <p>
        <span></span><span></span><span></span>
    </p>
    <p></p>
    <p></p> -->


    <div class="a">
        <p></p>
        <span></span>
        <h3></h3>
    </div>

    <script>

        // 子节点
        //   children()   儿子
        //   find()    后代


        // 兄弟
        //   next()
        //   prev()
        //   siblings()

        function GetEle(ele) {
            // 获取所有的元素  伪数组
            this.eles = document.querySelectorAll(ele);
        }


        // $符号就是实例化对象   省略每一次的new
        function $(ele) {
            return new GetEle(ele)
        }


        GetEle.prototype.children = function () {
            const c = this.eles[0].children;
            // this.eles = c ;    // HTMLCollection   没有forEach这个方法
            this.eles = [...c];   // 
        }

        GetEle.prototype.find = function (ele) {
            const c = this.eles[0].querySelectorAll(ele);    // NodeList   本身就有forEach
            this.eles = c;
        }


        GetEle.prototype.next = function () {
            const p = this.eles[0].nextElementSibling;
            // this.eles = p 
            this.eles = [p];   // 是一个数组  ---  forEach
        }

        GetEle.prototype.prev = function () {
            const p = this.eles[0].previousElementSibling;
            // this.eles = p 
            this.eles = [p];   // 是一个数组  ---  forEach
        }

        // 当前元素的兄弟元素
        GetEle.prototype.siblings = function () {
            // 先找到当前元素的父元素
            //     当前  this.eles[0]
            const p = this.eles[0].parentElement;
            const c = p.children;
            const arr = [...c];
            const arr2 = arr.filter(v => v !== this.eles[0]);
            // console.log(arr2)
            this.eles = arr2;
        }



        $('p').siblings()






    </script>

</body>

</html>